<template>
  <!-- 地物列表 -->
  <transition name="rightFade">
    <ground-features v-show="containerShow"></ground-features>
  </transition>
  <!-- 设施表 -->
  <facility-table v-show="facilityShow"></facility-table>
  <!-- 选项卡 -->
  <option-group></option-group>
  <!-- 顶部标题 -->
  <router-view name="functionList"></router-view>
  <!-- 左侧数据栏 -->
  <transition name="leftFade">
    <left-container v-show="containerShow"></left-container>
  </transition>
  <!-- 右侧数据栏-->
  <transition name="rightFade">
    <right-container v-show="false"></right-container>
  </transition>
  <!-- 地图 -->
  <Map></Map>
  <!-- 人口信息修改界面 -->
  <rewritePeople v-show="peopleChangeShow"></rewritePeople>
</template>

<script>
/* eslint-disable */
import topTitle from "@/components/title.vue";
import leftContainer from "@/components/leftContainer.vue";
import rightContainer from "../components/rightContainer.vue";
import bottomContainer from "../components/bottomContainer.vue";
import Map from "./map/map.vue";
import groundFeatures from "@/views/groundFeatures/groundFeatures";
import facilityTable from "@/views/facilityTable/facilityTable";
import rewritePeople from "@/views/contentList/rewritePeople";

import { onMounted, getCurrentInstance } from "@vue/runtime-core";
import { ElMessage } from "element-plus";
import pubsub from "pubsub-js";
import axios from "axios";
import { useStore } from "vuex";
import draggable from "vuedraggable";
import OptionGroup from "../views/contentList/optionGroup.vue";
import url from "../components/URL.json";
import { ElMessageBox } from "element-plus";

export default {
  name: "Layout",
  components: {
    groundFeatures,
    topTitle,
    leftContainer,
    rightContainer,
    bottomContainer,
    Map,
    facilityTable,
    OptionGroup,
    rewritePeople,
  },
  data: () => {
    return {
      containerShow: true,
      facilityShow: false,
      chartShow: true,
      groundFeaturesShow: true,
      dialogVisible: false,
      peopleChangeShow: false,
    };
  },
  setup() {
    onMounted(() => {
      subscribeList();
    });
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let subList = [];

    function subscribeList() {
      // 侧边栏显示控制
      subList[0] = pubsub.subscribe("containerShowChange", (n, data) => {
        proxy.containerShow = data;
      });
      // subList[1] = pubsub.subscribe("buildingSelect", () => {
      //   proxy.containerShow = true;
      //   lo
      //   Array.from(document.querySelectorAll(".main"))[1].style["display"] =
      //     "block";
      // });
      subList[2] = pubsub.subscribe("facilityTableShow", (n, data) => {
        proxy.facilityShow = data;
      });
      // 楼栋人口/周边显示控制
      subList[3] = pubsub.subscribe("optionRenew", (n, data) => {
        console.log(data);
        proxy.chartShow = data === "人口信息";
      });
      // 网格展示
      subList[4] = pubsub.subscribe("netView", () => {
        // proxy.containerShow = false;
      });
      // 首页样式
      subList[5] = pubsub.subscribe("FirstPageShow", (n, data) => {
        // console.log(Array.from(document.querySelectorAll(".main"))[1]);
        Array.from(document.querySelectorAll(".main"))[1].style["display"] =
          "none";
        if (data === "@@") {
          Array.from(document.querySelectorAll(".main"))[1].style["display"] =
            "block";
        }
      });
      //人口缺省
      subList[6] = pubsub.subscribe("peopletTablesShow", (n, data) => {
        proxy.chartShow = data;
        // console.log("####");
      });
      // 出租关系缺省
      subList[7] = pubsub.subscribe("RentDataShow", (n, data) => {
        Array.from(document.querySelectorAll(".main"))[1].style["display"] =
          data ? "block" : "none";
      });
      // dialog显示控制
      subList[8] = pubsub.subscribe("toPDF", () => {
        proxy.dialogVisible = true;
      });
      subList[9] = pubsub.subscribe("peopleChangeShow", (n, data) => {
        proxy.peopleChangeShow = data;
      });
      // 人口修改窗口隐藏
      subList[10] = pubsub.subscribe("reSearchPeople", (n, data) => {
        proxy.peopleChangeShow = false;
      });
    }

    //旧数据恢复
    function resetData(toPath) {
      // 从vuex中读取旧数据
      let oldDataP = store.state.people;
      let oldDataB = store.state.tempStorageB;
      if (toPath === "buildingSelected") {
        if (Object.keys(oldDataB).length) {
          console.log("恢复楼栋旧数据");
          console.log(oldDataB);
          pubsub.publish("buildingSelect", oldDataB);
        }
      } else if (toPath === "peopleSelected") {
        if (Object.keys(oldDataP).length) {
          console.log("恢复人口旧数据");
          pubsub.publish("needCut", false);
          pubsub.publish("peopleSelected", oldDataP);
        }
      }
    }

    // 清空旧数据
    function clearData() {
      store.commit("clearData");
    }
    return {
      resetData,
      clearData,
      subList,
    };
  },
  methods: {
    toPDF() {
      window.open("http://localhost:8086/party/pdf.pdf");
      this.dialogVisible = false;
    },
  },
  beforeRouteUpdate(to, from, next) {
    let toPath = to.fullPath;
    let fromPath = from.fullPath;
    // console.log(toPath, fromPath);
    // 前往首页
    if (toPath === "/main") {
      pubsub.publish("needReturn", "@");
      pubsub.publish("firstPageShowChange", true);
      this.clearData();
    }
    // 前往楼栋
    else if (toPath === "/buildingSelected") {
    }
    // 前往人口
    else if (toPath === "/peopleSelected") {
      setTimeout(() => {
        Array.from(document.querySelectorAll("td")).forEach((e) => {
          e.style["backgroundColor"] = "rgb(6,19,31)";
          e.style["border-bottom"] = "rgb(100,100,100) 1px solid";
        });
        Array.from(
          document.querySelectorAll(".el-table th.el-table__cell")
        ).forEach((e) => {
          e.style["backgroundColor"] = "rgb(6,19,31)";
          e.style["border-bottom"] = "rgb(100,100,100) 1px solid";
        });
      }, 500);
    }
    // 前往搜索
    else if (toPath === "/search") {
      pubsub.publish("needReturn");
    }
    // 来自首页
    if (fromPath === "/main") {
      pubsub.publish("firstPageShowChange", false);
    }
    // 来自楼栋
    else if (fromPath === "/buildingSelected") {
    } else {
      pubsub.publish(fromPath + toPath);
    }
    //恢复旧数据
    this.resetData(toPath.split("/")[1]);
    next();
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
// 设置全局样式
* {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
#hcTest {
  height: 100%;
  width: 100%;
  background-color: antiquewhite;
  position: absolute;
  z-index: 999999999999;
}

.leftFade-enter-active {
  transition: all 0.5s ease-out;
}

.leftFade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.3, 1);
  transform: translateX(-20%);
}

.leftFade-enter-from,
.leftFade-leave-to {
  transition: 0.5s;
  transform: translateX(-20%);
  opacity: 0;
}
.rightFade-enter-active {
  transition: all 0.5s ease-out;
}

.rightFade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.3, 1);
  transform: translateX(20%);
}

.rightFade-enter-from,
.rightFade-leave-to {
  transition: 0.5s;
  transform: translateX(20%);
  opacity: 0;
}
.bottomFade-enter-active {
  transition: all 0.5s ease-out;
}

.bottomFade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.3, 1);
  transform: translateY(20%);
}

.bottomFade-enter-from,
.bottomFade-leave-to {
  transition: 0.5s;
  transform: translateY(20%);
  opacity: 0;
}
.el-message .el-message-icon--success {
  color: var(--el-message-text-color) !important;
}
</style>